import { createRouter, createWebHistory } from 'vue-router'
import { useTokenStore } from '@/stores/token'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Products from '../views/Products.vue'
import Register from '../views/Register.vue'
import ForgotPassword from '../views/ForgotPassword.vue'

const routes = [
  {
    path: '/technology',
    name: 'Technology',
    component: () => import('@/views/Technology.vue'),
    meta: { title: '技术', requiresAuth: true }
  },
  {
    path: '/about',
    name: 'About', 
    component: () => import('@/views/About.vue'),
    meta: { title: '关于我们', requiresAuth: true }
  },

  { 
    path: '/', 
    name: 'Home', 
    component: Home,
    meta: { 
      title: '首页 - 后台管理系统',
      requiresAuth: true // 需要登录
    }
  },
  { 
    path: '/login', 
    name: 'Login', 
    component: Login,
    meta: { 
      title: '用户登录 - 后台管理系统',
      requiresAuth: false // 不需要登录
    }
  },
  { 
    path: '/products', 
    name: 'Products', 
    component: Products,
    meta: { 
      title: '产品管理 - 后台管理系统',
      requiresAuth: true // 需要登录
    }
  },
  { 
    path: '/register', 
    name: 'Register', 
    component: Register,
    meta: { 
      title: '用户注册 - 后台管理系统',
      requiresAuth: false // 不需要登录
    }
  },
  { 
    path: '/forgot-password', 
    name: 'ForgotPassword', 
    component: ForgotPassword,
    meta: { 
      title: '忘记密码 - 后台管理系统',
      requiresAuth: false // 不需要登录
    }
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('@/views/Profile.vue'),
    meta: { 
      title: '个人中心 - 后台管理系统',
      requiresAuth: true // 需要登录
    }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 全局前置守卫 - 按照需求文档实现
router.beforeEach((to, from, next) => {
  console.log('路由守卫执行: ', to.path)
  
  // 1. 设置document.title为路由配置的标题
  if (to.meta.title) {
    document.title = to.meta.title
    console.log('设置页面标题: ', to.meta.title)
  }
  
  // 2. 使用useToken获取当前用户的Token状态
  const tokenStore = useTokenStore()
  console.log('Token状态: ', tokenStore.hasToken ? '已登录' : '未登录')
  
  // 3. 判断访问路径是否为/login，如果是则直接放行
  if (to.path === '/login') {
    console.log('访问登录页，直接放行')
    next()
    return
  }
  
  // 4. 判断tokenStore.token是否存在Token，存在则放行，不存在则跳转至/login
  if (tokenStore.hasToken) {
    console.log('Token存在，允许访问: ', to.path)
    next()
  } else {
    console.log('Token不存在，重定向到登录页')
    next('/login')
  }
})

export default router